<!--
 * @Descripttion: your project
 * @version: 1.0
 * @Author: Aidam_Bo
 * @Date: 2022-10-18 14:40:30
 * @LastEditors: sunxiantao
 * @LastEditTime: 2022-10-20 13:55:53
-->
<template>
  <div class="zone-manage-index">
    <div class="zone-manage-index-title">新建/编辑专区</div>
    <section v-loading="loading" class="zone-manage-index-main">
      <el-form ref="form" :model="form" :rules="rules" label-width="150px" class="form">
        <el-form-item label="专区名称" prop="name">
          <el-input v-model.trim="form.name" maxlength="100" placeholder="" />
        </el-form-item>
        <el-form-item label="专区分类" prop="classifyId">
          <el-cascader
            ref="classify"
            v-model="form.classifyId "
            style="width: 100%"
            clearable
            :props="createClassifyProps"
            :options="classifyOptions"
          />
        </el-form-item>
        <el-form-item label="封面图片" prop="coverImgId">
          <image-upload
            :key="coverImg.imagecropperKey"
            v-model="form.coverImgId"
            :is-oss="isOss"
            :preview-id="coverImg.viewId"
            :forever="true"
            :width="702"
            :view="coverImg.view"
            :height="310"
            :no-circle="true"
            :no-rotate="false"
            lang-type="zh"
            @changeOssPath="handleSuccessCover"
            @changeImg="imgChangeCover"
          />
        </el-form-item>
        <!-- <el-form-item label="专区图片" prop="classImgs">
          <el-upload
            :action="classImg.view"
            list-type="picture-card"
            :file-list="form.classImgs"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <image-uploads
            :key="classImg.imagecropperKey"
            :is-oss="isOss"
            :forever="true"
            :width="750"
            :view="classImg.view"
            :height="420"
            :limit="form.classImgs.length"
            :no-circle="true"
            :no-rotate="false"
            lang-type="zh"
            @changeOssPath="handleSuccessClass"
            @changeImg="imgChangeClass"
          />
        </el-form-item> -->
        <!-- <el-form-item label="专区视频" prop="videoId">
          <div v-if="!uploadFile.file" class="selectbtn" @click="uploadFile.showUpload = true">开始上传</div>
          <template v-else>
            <div :key="form.courseId" class="select-data">
              {{ uploadFile.file.name }}
              <i class="el-icon-close" @click="clearFile"></i>
            </div>
            <i class="el-icon-view" @click="previewFile"></i>
          </template>
          <Upload
            v-if="uploadFile.showUpload"
            ref="upload"
            :accept="uploadFile.accept"
            :limit="1"
            :show-chunks="true"
            :multiple="false"
            :chunk-size="uploadFile.chunksize"
            @close="uploadFile.showUpload = false"
            @success="uploadSuccess"
          >
            <div slot="tip" class="upload-tip">
              <i class="el-icon-info"></i>
              : 只能上传：视频
            </div>
          </Upload>
        </el-form-item> -->
        <!-- <el-form-item label="管理员" prop="extend5">
          <el-button class="button-new-tag" size="small" @click="showInputBzr">请选择 +</el-button>
          <div>
            <el-tag v-for="tag in form.extend5" :key="tag.id" closable @close="handleClose(tag)">
              {{ tag.userRealname }}
            </el-tag>
          </div>
        </el-form-item> -->
        <!-- <el-form-item label="专区开放日期" prop="bjpxrq">
          <el-date-picker
            v-model.trim="form.bjpxrq"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :disabled="numLimit"
          />
          <el-checkbox v-model="numLimit" style="margin-left: 20px;">不限制</el-checkbox>
        </el-form-item> -->
        <el-form-item label="链接类型" prop="extend1">
          <el-radio-group v-model="form.extend1">
            <el-radio label="1">内部链接</el-radio>
            <el-radio label="2">外部链接</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="链接地址" prop="extend2">
          <el-input v-model="form.extend2" placeholder="请输入链接地址" />
        </el-form-item>
        <!-- <el-form-item label="专区简介" prop="briefIntroduction">
          <el-input v-model.trim="form.briefIntroduction" maxlength="1000" placeholder="" show-word-limit type="textarea" :rows="6" />
        </el-form-item>
        <el-form-item label="专区介绍" prop="remark">
          <tinymce v-if="isTinymce" v-model="form.remark" :is-oss="isOss" :height="300" />
        </el-form-item> -->
        <!-- <el-form-item label="专区大纲" prop="extend1">
          <tinymce v-if="isTinymce" v-model="form.extend1" :is-oss="isOss" :height="300" />
        </el-form-item> -->
        <!-- <el-form-item label="讲师介绍" prop="extend2">
          <el-input v-model.trim="form.extend2" maxlength="1000" placeholder="" show-word-limit type="textarea" :rows="6" />
        </el-form-item> -->
        <!-- <el-form-item label="" prop="extend3">
          <div>
            <el-button class="button-new-tag" size="small" @click="showInputRwys">请选择讲师</el-button>
          </div>
          <div>
            <el-tag v-for="tag in form.extend3" :key="tag.id" closable @close="handleCloses(tag)">
              {{ tag.name }}
            </el-tag>
          </div>
        </el-form-item> -->
        <!-- <el-form-item label="人物信息展示方式" prop="extend4">
          <el-select v-model="form.extend4" placeholder="请选择人物信息展示方式">
            <el-option v-for="item in dict['RWXXYSLX']" :key="item.dictValue" :label="item.dictName" :value="item.dictValue" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="排序" prop="sort">
          <el-input v-model.trim="form.sort" maxlength="100" placeholder="" />
        </el-form-item>
      </el-form>
    </section>
    <section class="zone-manage-index-footer">
      <el-button style="padding: 10px 30px;" @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="onSubmint('form')">确 定</el-button>
    </section>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
    <el-dialog :visible.sync="dialogVisibleVideo" destroy-on-close @close="dialogVideoUrl = ''">
      <div class="video video-full">
        <video
          v-if="dialogVideoUrl"
          id="my-video"
          :src="dialogVideoUrl"
          style="width: 100%;height: 100%;"
          autoplay
          class="video-js vjs-default-skin"
          controls
          preload="auto"
        ></video>
      </div>
    </el-dialog>
    <!-- 选择班主任 -->
    <el-dialog v-el-drag-dialog :title="xzryTitle" :visible.sync="dialogFormVisible" center fullscreen :close-on-click-modal="false">
      <add-user ref="resetAll" v-loading.fullscreen.lock="fullscreenLoading" :before-list="beforeList" @userData="userData" />
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="dialogFormVisible = false">取消</el-button>
        <el-button style="padding: 8px 30px;" type="primary" @click="insertUser()">确定</el-button>
      </div>
    </el-dialog>
    <!-- 选择讲师 -->
    <el-dialog v-el-drag-dialog title="选择讲师" :visible.sync="dialogFormVisibles" center fullscreen :close-on-click-modal="false">
      <add-users ref="resetAll" v-loading.fullscreen.lock="fullscreenLoadings" :before-list="beforeLists" @userData="userDatas" />
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="dialogFormVisibles = false">取消</el-button>
        <el-button style="padding: 8px 30px;" type="primary" @click="insertUsers()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import addUser from '@/views/roleuserallot/components/adduser' // Secondary package based on el-pagination
import addUsers from '../components/addUser' // Secondary package based on el-pagination
import Upload from '../components/upload/index'
import ImageUpload from '@/components/ImageUpload'
import ImageUploads from '@/components/ImageUploads'
import { getDictByCode, addClassResources, updateClassResources, courseDetails, fetchList } from '../api/index'
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
export default {
  name: 'CoursewareManage',
  components: { ImageUpload, ImageUploads, Upload, addUsers, Tinymce, addUser },
  directives: { elDragDialog },
  filters: {
    'this.form.classImgs': function(val) {
      if (val.length >= 9) {
        this.isBjtp = true
      } else {
        this.isBjtp = false
      }
    }
  },
  data() {
    return {
      createClassifyProps: {
        label: 'classifyName',
        value: 'id',
        checkStrictly: true
      },
      isTinymce: false, // 编辑的时候要拿到数据在显示富文本组件
      loading: false,
      dict: [],
      classifyOptions: [],
      showClassify: false,
      dialogVisibleVideo: false,
      dialogVideoUrl: '',
      dialogImageUrl: '',
      dialogVisible: false,
      dialogFormVisible: false,
      fullscreenLoading: false,
      dialogMultipleSelection: [],
      beforeList: [],
      dialogFormVisibles: false,
      fullscreenLoadings: false,
      dialogMultipleSelections: [],
      beforeLists: [],
      xzryTitle: '选择班主任',
      form: {
        classifyId: [],
        type: 'ZQLX_ZQ',
        id: '',
        name: '', // 专区名称
        coverImgId: '', // 封面图片
        classImgs: [], // 专区图片
        videoId: {
          id: '',
          name: '',
          subjectDuration: ''
        }, // 专区视频
        // extend5: [], // 管理员
        // extend3: [], // 选择讲师
        bjpxrq: '',
        briefIntroduction: '', // 专区简介
        remark: '', // 方向
        extend1: '1', // 链接类型
        extend2: '', // 链接地址
        extend4: '', // 人物信息展示类型
        sort: 0 // 排序
      },
      numLimit: true,
      isBjtp: false,
      rules: {
        name: [{ required: true, message: '请输入专区名称', trigger: 'change' }],
        classifyId: [{ required: true, message: '请选择专区分类', trigger: 'change' }],
        coverImgId: [{ required: true, message: '请上传封面图片', trigger: 'change' }],
        // bjpxrq: [{ required: true, message: '请选择活动日期', trigger: 'change' }],
        extend4: [{ required: true, message: '请选择人物信息展示方式', trigger: 'change' }],
        extend1: [{ required: true, message: '请选择链接类型', trigger: 'change' }],
        extend2: [{ required: true, message: '请填写跳转地址', trigger: 'blur' }],
        /*        extend5: [
          {
            required: true,
            message: '请选择班主任',
            trigger: 'change',
            validator: (rule, value, callback) => {
              if (value.length === 0) {
                callback(new Error('请选择班主任'))
              } else {
                callback()
              }
            }
          }
        ],*/
        extend3: [
          {
            required: true,
            message: '请选择讲师',
            trigger: 'change',
            validator: (rule, value, callback) => {
              if (value.length === 0) {
                callback(new Error('请选择讲师'))
              } else {
                callback()
              }
            }
          }
        ],
        // remark: [{ required: true, message: '请输入专区介绍', trigger: 'change' }],
        sort: [{ required: true, message: '请输入排序', trigger: 'change' }]
      },
      view: '/API-DOCUMENT/document/file/download?id=',
      player: null,
      coverImg: {
        viewId: '',
        view: '/API-DOCUMENT/document/file/download?id=',
        imagecropperKey: 0
      },
      classImg: {
        viewId: '',
        view: '/API-DOCUMENT/document/file/download?id=',
        imagecropperKey: 0
      },
      uploadFile: {
        showUpload: false,
        accept: 'video/*',
        chunksize: 10 * 1024 * 1024,
        file: '',
        oldfile: ''
      },
      isOss: sessionStorage.getItem('FILE_SAVE_THIRD_CONFIG') || false
    }
  },
  created() {
    // this.getClassifyOption()
    // // type 类型 是新增 c / 编辑 u
    // if (!this.$route.query.type) {
    //   this.$message({
    //     showClose: true,
    //     message: '参数异常！',
    //     type: 'warning',
    //     onClose: () => {
    //       this.$router.back()
    //     }
    //   })
    // } else {
    //   this.getDict('RWXXYSLX')
    //   if (this.$route.query.type === 'u') {
    //     this.isTinymce = false
    //     this.getData(this.$route.query.id)
    //   } else {
    //     this.isTinymce = true
    //   }
    // }
  },
  methods: {
    /**
     * 获取分类
     */
    getClassifyOption() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        fetchList({ classifyType: 'AREA_ZQ' })
          .then(({ data }) => {
            loading.close()
            this.classifyOptions = data.data || []
            resolve()
          })
          .catch((error) => {
            loading.close()
            reject(error)
          })
      })
    },
    // 选择班主任
    showInputBzr() {
      this.xzryTitle = '选择班主任'
      this.dialogFormVisible = true
    },
    // 选择选择讲师
    showInputRwys() {
      this.dialogFormVisibles = true
    },
    handleClose(tag) {
      this.form.extend5.splice(this.form.extend5.indexOf(tag), 1)
    },
    // 删除讲师
    handleCloses(tag) {
      this.form.extend3.splice(this.form.extend3.indexOf(tag), 1)
    },
    // 确定选择的人员
    insertUser() {
      if (this.dialogMultipleSelection.length > 0) {
        const dataBzr = this.dialogMultipleSelection.map((item) => {
          return {
            id: item.id,
            userRealname: item.userRealname
          }
        })
        this.$set(this.form, 'extend5', dataBzr)
        this.dialogListLoading = true
        this.dialogFormVisible = false
      } else {
        this.$message({
          message: '请选择班主任！',
          type: 'warning'
        })
      }
    },
    // 确定选择的人员
    insertUsers() {
      if (this.dialogMultipleSelections.length > 0) {
        const dataBzr = this.dialogMultipleSelections.map((item) => {
          return {
            id: item.id,
            name: item.name
          }
        })
        this.$set(this.form, 'extend3', dataBzr)
        this.dialogListLoadings = true
        this.dialogFormVisibles = false
      } else {
        this.$message({
          message: '请选择讲师！',
          type: 'warning'
        })
      }
    },
    userData(val) {
      this.dialogMultipleSelection = val
    },
    // 选择人物元素
    userDatas(val) {
      this.dialogMultipleSelections = val
    },
    // 清除文件
    clearFile() {
      this.uploadFile.file = ''
      this.form.videoId.id = ''
      this.form.videoId.name = ''
      this.form.videoId.subjectDuration = ''
    },
    // 视频上传完成回调
    uploadSuccess(id, files) {
      if (id) {
        this.$set(this.form, 'videoId', {
          id: id,
          name: files[0].name.substring(0, files[0].name.lastIndexOf('.')),
          subjectDuration: files[0].duration
        })
        // this.form.videoId.id = id
        // this.form.videoId.name = files[0].name.substring(0, files[0].name.lastIndexOf('.'))
        // this.form.videoId.subjectDuration = files[0].duration
        this.uploadFile.file = files[0]
        this.uploadFile.showUpload = false
      }
    },
    // 删除专区图片
    handleRemove(file, fileList) {
      const dataClone = JSON.parse(JSON.stringify(this.form.classImgs))
      const imgData = dataClone.filter((item) => item.url !== file.url)
      this.$set(this.form, 'classImgs', imgData)
    },
    // 预览专区图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 预览视频
    previewFile() {
      this.dialogVideoUrl = this.view + this.form.videoId.id
      this.dialogVisibleVideo = true
    },
    // 上传专区图片回调id
    imgChangeClass(id) {
      this.form.classImgs.push({ url: this.coverImg.view + id })
    },
    // 上传专区图片回调
    handleSuccessClass(path) {
      this.form.classImgs.pop()
      this.form.classImgs.splice(this.form.classImgs.length - 1, 0, { url: path })
    },
    // 上传封面图片回调id
    imgChangeCover(id) {
      this.coverImg.viewId = this.coverImg.view + id
    },
    // 上传封面图片回调
    handleSuccessCover(path) {
      this.coverImg.viewId = path
    },
    handleCancel() {
      this.$router.replace({ path: this.$filterPath('index') })
    },
    onSubmint() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          const params = Object.assign({}, this.form, {
            classImgs: this.form.classImgs.map((item) => item.url).toString(),
            // extend5: this.form.extend5.map((item) => item.id).toString(),
            // extend3: this.form.extend3.map((item) => item.id).toString(),
            startTime: this.form.bjpxrq[0],
            endTime: this.form.bjpxrq[1],
            videoId: this.form.videoId ? this.form.videoId.id : '',
            bjpxrq: ''
          })
          if (this.numLimit) {
            params['startTime'] = '1900-01-01 00:00:00'
            params['endTime'] = '2300-12-31 23:59:59'
          }
          delete params.bjpxrq
          delete params.mentorList
          delete params.teacherList
          params['type'] = 'ZQLX_ZQ'
          params['isRegist'] = '2'
          params.classifyId = this.form.classifyId[this.form.classifyId.length - 1]
          if (this.$route.query.type === 'c') {
            return new Promise((resolve, reject) => {
              addClassResources(params)
                .then(() => {
                  this.dialogVisible = false
                  loading.close()
                  this.$message({
                    title: '成功',
                    message: '新增成功',
                    type: 'success',
                    duration: 2000
                  })
                  this.handleCancel()
                })
                .catch((error) => {
                  loading.close()
                  reject(error)
                })
            })
          } else {
            return new Promise((resolve, reject) => {
              params.classifyId = this.form.classifyId[this.form.classifyId.length - 1]
              updateClassResources(params)
                .then(() => {
                  this.dialogVisible = false
                  loading.close()
                  this.$message({
                    title: '成功',
                    message: '编辑成功',
                    type: 'success',
                    duration: 2000
                  })
                  this.handleCancel()
                })
                .catch((error) => {
                  loading.close()
                  reject(error)
                })
            })
          }
        } else {
          return false
        }
      })
    },
    /**
     * 根编辑回显
     */
    getData(id) {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        courseDetails({ id: id })
          .then((res) => {
            loading.close()
            this.form = res.data.data
            this.form.classifyId = res.data.data.classifyId ? res.data.data.classifyId.split(',') : []
            // 处理班主任/讲师/以及专区图片
            // this.$set(
            //   this.form,
            //   'extend5',
            //   res.data.data.teacherList.map((item) => {
            //     return {
            //       id: item.userId,
            //       userRealname: item.userName
            //     }
            //   })
            // )
            if (res.data.data.videoId) {
              this.$set(this.uploadFile, 'file', { name: res.data.data.videoId })
              this.$set(this.form, 'videoId', { id: res.data.data.videoId, name: res.data.data.videoId })
            }
            // this.$set(this.form, 'extend3', res.data.data.mentorList)
            if (res.data.data.startTime === '1900-01-01 00:00:00' || res.data.data.endTime === '2300-12-31 23:59:59') {
              this.$set(this.form, 'bjpxrq', [])
              this.numLimit = true
            } else {
              this.$set(this.form, 'bjpxrq', [res.data.data.startTime, res.data.data.endTime])
            }
            this.$set(
              this.form,
              'classImgs',
              res.data.data.classImgs
                ? res.data.data.classImgs.split(',').map((item) => {
                  return { url: item }
                })
                : []
            )
            this.imgChangeCover(res.data.data.coverImgId)
            this.isTinymce = true
          })
          .catch((error) => {
            this.isTinymce = true
            loading.close()
            reject(error)
          })
      })
    },
    /**
     * 获取字典
     */
    getDict(code) {
      return new Promise((resolve, reject) => {
        getDictByCode(code)
          .then((res) => {
            const datas = res.data.data && res.data.data.length > 0 ? res.data.data[0].list : []
            this.$set(this.dict, code, datas)
            this.$forceUpdate()
          })
          .catch((error) => {
            reject(error)
          })
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.zone-manage-index {
  background-color: #fff;
  min-height: calc(100vh - 60px);
  max-height: calc(100vh - 60px);
  overflow: hidden;

  .video-full {
    height: 88vh;
  }
  .video {
    width: 100%;
    height: 400px;
    &.p-full {
      height: 88vh;
    }
    background-color: black;
  }
  .zone-manage-index-title {
    position: relative;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    font-family: PingFangSC-Medium;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    font-size: 14px;
    &:before {
      content: '';
      position: absolute;
      width: 2px;
      @include bg-color($mainColor);
      top: 13px;
      bottom: 13px;
      left: 15px;
    }
  }

  .zone-manage-index-main {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 52px;
    box-sizing: border-box;
    padding: 0 10px;
    overflow: hidden;
    &::-webkit-scrollbar {
      width: 8px; /*对垂直流动条有效*/
      height: 1px; /*对水平流动条有效*/
    }
    /** 滚动条轨道*/
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      background-color: white;
      border-radius: 3px;
    }
    /** 滚动条里面小方块*/
    &::-webkit-scrollbar-thumb {
      height: 32px;
      border-radius: 5px;
      box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
      background-color: #eaeaea;
    }
    &:hover {
      overflow: auto;
    }
    .form {
      width: 1000px !important;
      margin: 0 auto;
      .el-select {
        width: 100%;
      }
      .coverScreenshots-images {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        .coverScreenshots-item {
          width: 190px;
          display: inline-block;
          margin-right: 10px;
          cursor: pointer;
          >img {
            width: 100%;
            height: auto;
          }
        }
      }
      .el-icon-view {
        cursor: pointer;
      }

      .line {
        text-align: center;
      }
    /*  .custom-uploader{
        width: 300px;
        height: 180px;
        >img{
          width: 100%;
          height: 100%;
        }
      }*/
    }
    .select-data {
      display: inline-block;
      background: rgba(246, 246, 246, 1);
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      padding: 0 10px;
      margin-right: 5px;
      margin-bottom: 8px;
      i {
        cursor: pointer;
        padding-left: 5px;
      }
    }
    .selectbtn {
      display: inline-block;
      width: 120px;
      background: rgba(255, 255, 255, 1);
      @include border-color(1px, dotted, $mainColor);
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      @include font-color($mainColor);
      text-align: center;
      cursor: pointer;
    }
    .el-date-editor {
      width: 500px;
    }
  }

  .zone-manage-index-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    padding: 10px 0;
    background-color: white;
    box-shadow: 0 -3px 6px #f5f5f5;
  }
  .el-table__body-wrapper {
    overflow-y: scroll !important;
  }
  .courseware-preview {
    .el-dialog__body {
      position: relative;
      .full {
        position: absolute;
        width: 100px;
        height: 58px;
        right: 50px;
        top: -58px;
        display: flex;
        align-items: center;
        text-align: right;
      }
    }
  }
}
</style>
<style lang="scss">
.zone-manage-index {
  .classify-tree-con {
    position: relative;
    height: 400px;
    overflow: hidden;
    .classify-tree-con-scrollbar {
      overflow: hidden;
      .el-scrollbar__wrap {
        max-height: 381px;
      }
    }
    .custom-tree-node {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      width: 100%;
      .tree-node-txt {
        flex: 1;
      }
    }
  }
  .el-tag--medium {
    line-height: 32px;
    height: 32px;
    & + .el-tag--medium {
      margin-left: 10px;
    }
  }
  .el-upload--picture-card {
    display: none;
  }
  .my-title {
    width: 100%;
    display: inline-block;
    font-size: 16px !important;
    font-family: PingFangSC-Medium !important;
    font-weight: 700 !important;
    color: #333333 !important;
    position: relative;
    .full {
      position: absolute;
      width: 100px;
      height: 58px;
      right: 50px;
      top: -18px;
      display: flex;
      align-items: center;
      text-align: right;
    }
  }
}
</style>
